<template>
	<view class="page">
		<p-navbar title="开通会员">
			<view class="jl" @tap="record()">
				会员记录
			</view>
		</p-navbar>
		<view class="number flex align-items justify-between">
			<view class="left">
				数量
			</view>
			<view class="right flex align-items">
				<view class="reduce" @tap="reduce">
					-
				</view>
				<view class="num">
					{{num}}
				</view>
				<view class="add" @tap="add">
					+
				</view>
			</view>
		</view>
		<view class="pice flex align-items justify-between" v-for="(item,index) in vipList" :key="index">
			{{item.name}}
			<view class="">
				<!-- <text v-if="item.name=='单价'" style="color: #333;font-size: 24rpx; margin-right: 5rpx;">免提现权益</text> -->
				<text>{{proint(item.pice)}} USDT</text><text v-if="item.name=='单价'">/年</text>
			</view>
		</view>
		<view class="payable">
			应付金额：{{payable}} USDT
		</view>
		<view class="Insufficient" v-if="isbalance">
			<text v-if="userinfo.myMoney.balance>=0">可用余额:{{proint(userinfo.myMoney.balance)}} USDT</text>
			<text v-else><text >USDT余额不足</text> <text  @tap="chongbi">去充值</text></text>
		</view>
		<view class="submit">
			<u-button type="primary" ripple  shape="circle" @tap="event" :style="{'background':userinfo.myMoney.balance>=0?'#F3C31B':''}">提交订单</u-button>
		</view>
		<!-- 安全密码输入 -->
		<u-popup v-model="shows" mode="bottom" class="popup">
			<view class="pop" >
				安全支付
			</view>
			<view class="form" style="padding: 0 20rpx;">
				<view class="item" v-for="(item,index) in prson" :key="index" style="padding-top: 20rpx;">
					<view class="label">{{ item.label }}</view>
					<view class="content">
						<input class="input" :placeholder="item.msg"  :type="item.type" v-model="form[item.key]" />
						<view class="password" :class="{ show: showPsw }"  @tap="fnPsw(index)"></view>
					</view>
				</view>
			</view>
			<view class="submit" style="margin: 20rpx 50rpx;">
				<u-button type="primary" ripple :loading="loading" shape="circle" @tap="fnForget" :style="{'background':userinfo.myMoney.balance>=0?'#F3C31B':''}">确 定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipList:[
					{
						name:"单价",
						pice:"120"
					},
					// {
					// 	name:"金额",
					// 	pice:"150"
					// },
					
				],
				num:'1',//购买数量
				loading: false ,// 加载中
				isbalance:true,//余额是否不足
				shows:false,//模态框
				form:{},
				showPsw: false,//密码password or text
				prson: [{
					key: 'securityPassword',
					label: '安全密码',
					msg: '请设置您的安全密码',
					icon: 'password',
					type: 'password',
					len: 20
				}],
			}
		},
		computed: {
			// 开通按钮是否禁止点击
			disabled() {
				if (!this.isbalance) {
					return true;
				} else {
					return false
				}
			},
			//计算应付金额
			payable(){
				return this.proint(this.num*this.vipList[0].pice)
			},
			proint(){
				return t=>{
					// if(!t) return '0.0000'
					// return Number(t).toFixed(4)
					return this.util.decimal(t)
				}
			},
			userinfo(){//用户信息
				return this.$state.userinfo
			},
		},
		onLoad() {
			this.request('sys/findValueByKey?code=vip_price',{//金额
				vip_price:'10'
			}).then(res=>{
				this.vipList[0].pice=res.data.data
			})
		},
		methods: {
			record(){//会员记录
				this.$Router.push({ path: '/pages/user/record',query:{type:JSON.stringify(4)}})
			},
			event(){
				if(this.userinfo.myMoney.balance<=0) return this.util.toast('金额不足');		
				this.shows=true
			},
			fnForget(){
				if(!this.form.securityPassword) return this.util.toast('安全密码不能为空');
				this.loading=true
				// return;
				this.request({
					url:'vip/createVIPOrder',
					params:{
						buyNum:this.num,//金额
						username:uni.getStorageSync('Login').name,//用户名
						securityPassword:this.form.securityPassword//密码
					}
				})
				.then(res=>{
					if(res.data.code==1){
						this.util.toast('购买成功','success')
						setTimeout(()=>{
							this.$Router.pushTab({
								path: '/pages/user/user'
							})
						},1500)
					}
					this.loading=false
				})
			},
			fnPsw(i) { //密码隐藏显示
				this.showPsw = !this.showPsw;
				const type = this.prson[i].type
				this.$set(this.prson[i], 'type', type === 'password' ? 'text' : 'password')
			},
			//数量加
			add(){
				this.num++
			},
			// 数量减
			reduce(){
				if(this.num=='1'){
					this.num = '1'
				}else{
					this.num--
				}
			},
			// 充值
			chongbi(){
				uni.navigateTo({
					url:'./chongbi'
				})
			},
		},
		watch:{
			
		}
	}
</script>

<style lang="scss">
	.jl{
		color: $color-fu;
	}
	.page{
		margin: 80rpx 36rpx;
		font-family: PingFang;	
	}
	.number{
		margin-bottom: 60rpx;
		.right{
			width: 264rpx;
			height: 44rpx;
			.reduce,.add{
				text-align: center;
				width: 88rpx;
				background: #CCCCCC;
				border-radius: 8rpx 0rpx 0px 8rpx;
				
			}
			.add{
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}
			.num{
				text-align: center;
				width: 88rpx;
				background: #fff;
			}
		}
	}
	.pice{
		margin-bottom: 40rpx;
		font-weight: 400;
		text{
			font-weight: bold;
		}
	}
	.payable,.Insufficient{
		text-align: right;
		margin-bottom: 40rpx;
		font-weight: bold;
	}
	.Insufficient{
		text{
			&:first-child{
				font-size: 28rpx;
				color: #FFB740;
				
			}
			&:last-child{
				margin-left: 40rpx;
				font-size: 28rpx;
				color: #1677FF;
			}
		}
	}
	.submit {
		// margin: 60rpx 64rpx;
	
		/deep/ .u-btn {
			background-color: rgba(#1677FF,0.1);
			// box-shadow: 0 17rpx 40rpx rgba(38, 109, 245, .3);
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;
	
			// border-radius: 10rpx;
			&[disabled] {
	
				box-shadow: none !important;
				background-color: $light-color !important;
			}
	
			/deep/ .u-round-circle::after {
				/* border-radius: 50px; */
				border-radius: 20rpx;
			}
		}
	
		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}
	.popup {
		/deep/ .u-drawer-bottom {
			bottom: 0;
			left: 0;
			right: 0;
			background-color: $color-bgs !important;
		}
	}
	.pop {
		// width: 100%;
	
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		// padding: 0rpx 30rpx 0rpx 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid $border;
		text-align: center;
		// color: #FFFFFF;
	
		text {
			float: right;
			padding-right: 40rpx;
			font-size: 24rpx;
			color: #999999;
			// padding-left: 20%;
		}
	}
	.form {
			padding: 0 40rpx;
			// background: #FFFFFF;
			border-radius: 12rpx;
			margin: 0rpx 0rpx;
			
		}
		.item {
			padding-top: 40rpx;
			border-bottom: 1rpx solid $border;
			.content {
				@include flex;
			}
		
			.label {
		
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
				height: 40rpx;
				font-size: 28rpx;
		
				background-size: 36rpx 40rpx;
				background-position: 0 center;
				background-repeat: no-repeat;
				// line-height: 40rpx;
			}
		
			.input {
				color: #333;
				font-size: 26rpx;
				height: 100rpx;
				padding: 0 30rpx 0 0rpx;
				flex: 1;
				background: none;
				border: none;
				outline: none;
			}
			.password {
				width: 32rpx;
				height: 30rpx;
				@include background;
				margin-right: 50rpx;
				@include click;
				background-image: url(../../static/user/login-psw-hide.png);
				background-size: 100%;
				margin-top: 5rpx;
			
				&.show {
					color: red;
					background-image: url(../../static/user/login-psw-show.png);
					// @include background;
				}
			}
		
			.code {
				padding: 0rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 50rpx;
				color: $light-color;
				margin-right: 30rpx;
				@include click;
			}
		}
</style>
